import React from 'react'
import './AddPower.css'
import { Button, Input, Select, DatePicker, Space, InputNumber } from 'antd'
import moment from 'moment'
import axios from '../../../utils/http'
import * as api from '../../../utils/api'


const { Option } = Select;
const { RangePicker } = DatePicker

class AddPower extends React.Component {
    constructor() {
        super()
        this.state = {
            // 商品名称的数据
            goodsName:[],

            //添加的数据
            data:{

            }
        }
    }

    //  生命周期
    componentWillMount() {
        // 查询助力活动信息
        console.log(this.state.data);
        axios({
            method: 'get',
            url: api.QUERYCOODS,
            // params:{goodsName:'西瓜'}
            data: { goodsName: '西瓜' }
        }).then((data) => {
            console.log(data.data.data);
            this.setState({
                goodsName:[...data.data.data]
            })
        })
    }

    // 获取搜索框的值
    hqInput = (e) => {
        // console.log(e.target.value);
        // let obj = [ ...this.state.data 
        // obj.goodsName = e.target.value
        // this.setState({
        //     data: { ...obj }
        // })
    }

    // 商品搜索按钮
    shopSousuo = () => {

    }

    onChangeTime = (dates, dateStrings) => {
        // console.log('From: ', dates[0], ', to: ', dates[1]);
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
        // console.log(dateStrings[0]);
        let add = { ...this.state.data }
        // console.log(value);
        add.fativeStart = dateStrings[0]
        add.fativeLast = dateStrings[1]
        this.setState({
            data:{...add}
        })
    }


    //    商品名称下拉框
    onChange = (value) => {
        // console.log(`selected ${value}`);
        let obj = {...this.state.data}
        obj.goodsId=value
        this.setState({
            data:{...obj}
        })
    }

    // 人数输入框
    onChangePeopel=(value)=> {
        // console.log('changed', value);
        let obj = {...this.state.data}
        obj.fativeNum=value
        this.setState({
            data:{...obj}
        })
    }

     // 库存输入框
     onChangeKucun=(value)=> {
        // console.log('changed', value);
        let obj = {...this.state.data}
        obj.fativeIntv=value
        this.setState({
            data:{...obj}
        })
    }

    buttons=()=>{
        console.log(this.state.data);
        axios({
            url:api.ADDFACTIVE,
            method:'post',
            data:this.state.data
        }).then(data=>{
            console.log(data);
        })
    }




    render() {
        return (
            <div className='AddPower'>
                {/* <h1>助力活动</h1>
                <div className='erji'><h2>添加助力</h2></div> */}
                <div className='shopSs'><span>商品关键字:</span><span><Input style={{ color: 'black' }} placeholder="请输入商品名称" onChange={this.hqInput} /> <Button type="primary" onClick={this.shopSousuo}>搜索</Button>  </span></div>
                <div className='shopSs'><span>商品名称:</span>
                    <span><Select
                        showSearch
                        style={{ width: 200 }}
                        placeholder="商品名称"
                        optionFilterProp="children"
                        onChange={this.onChange}
                        filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                    > {this.state.goodsName.map(item=>{
                    return <Option key={item.goodsId} value={item.goodsId}>{item.goodsName}</Option>
                    })

                    }
                        {/* <Option value="jack">Jack</Option>
                        <Option value="lucy">Lucy</Option>
                        <Option value="tom">Tom</Option> */}
                    </Select></span></div>
                <div className='hdtime'><span>活动日期：</span>
                    <span>
                        <Space direction="vertical" size={12}>
                            <RangePicker
                                ranges={{
                                    Today: [moment(), moment()],
                                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                                }}
                                showTime
                                format="YYYY/MM/DD HH:mm:ss"
                                onChange={this.onChangeTime}
                            />
                        </Space>
                    </span>
                </div>
                <div><span>阻力人数：</span><span>
                    <InputNumber min={1} max={30} style={{ background:'#1C1C2B'}} onChange={this.onChangePeopel} />
                </span></div>
                <div>
                    <span>阻力库存：</span>
                    <span><InputNumber min={1} style={{ background:'#1C1C2B'}}  onChange={this.onChangeKucun} /></span>
                </div>
                <Button type="primary" onClick={this.buttons}>确定</Button>


            </div>
        )
    }

}

export default AddPower